﻿<DemoPageSectionComponent Id="Utility-Button-Styles" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="component-container flex-column w-100">
            <div class="buttons-group mb-2">
                <div class="buttons-group-title mb-2">
                    Contained style:
                </div>
                <div class="d-flex flex-row flex-wrap">
                    @foreach (ButtonRenderStyle style in btnStyles) {
                        <div class="me-2 mb-2">
                            <DxButton RenderStyle="@style"
                                      SizeMode="Params.SizeMode"
                                      Text="@Enum.GetName(typeof(ButtonRenderStyle), style)"
                                      CssClass="w-100" />
                        </div>
                    }
                </div>
            </div>
            <div class="buttons-group mb-2">
                <div class="buttons-group-title mb-2">Outline style:</div>
                <div class="d-flex flex-row flex-wrap">
                    @foreach (ButtonRenderStyle style in btnStyles) {
                        <div class="me-2 mb-2">
                            <DxButton RenderStyle="@style"
                                      SizeMode="Params.SizeMode"
                                      RenderStyleMode="@ButtonRenderStyleMode.Outline"
                                      Text="@Enum.GetName(typeof(ButtonRenderStyle), style)"
                                      CssClass="w-100" />
                        </div>
                    }
                </div>
            </div>
            <div class="buttons-group mb-2">
                <div class="buttons-group-title mb-2">Text style:</div>
                <div class="d-flex flex-row flex-wrap">
                    @foreach (ButtonRenderStyle style in btnStyles) {
                        <div class="me-2 mb-2">
                            <DxButton RenderStyle="@style"
                                      SizeMode="Params.SizeMode"
                                      RenderStyleMode="@ButtonRenderStyleMode.Text"
                                      Text="@Enum.GetName(typeof(ButtonRenderStyle), style)"
                                      CssClass="w-100" />
                        </div>
                    }
                </div>
            </div>
            <div class="buttons-group mb-2">
                <div class="buttons-group-title mb-2">Disabled:</div>
                <div class="d-flex flex-row flex-wrap">
                    @foreach (ButtonRenderStyle style in btnStyles) {
                        <div class="me-2 mb-2">
                            <DxButton RenderStyle="@style"
                                      CssClass="w-100"
                                      RenderStyleMode="@ButtonRenderStyleMode.Contained"
                                      Text="@Enum.GetName(typeof(ButtonRenderStyle), style)"
                                      SizeMode="Params.SizeMode"
                                      Enabled="false" />
                        </div>
                    }
                </div>
            </div>
        </div>
    </ChildContentWithParameters>


    @code {
        List<ButtonRenderStyle> btnStyles;

        protected override void OnInitialized() {
            base.OnInitialized();
            btnStyles = new List<ButtonRenderStyle>((ButtonRenderStyle[])Enum.GetValues(typeof(ButtonRenderStyle)));
            @*BeginHide*@
            btnStyles.RemoveAt(0);
            btnStyles.Remove(ButtonRenderStyle.Dark);
            btnStyles.Remove(ButtonRenderStyle.Light);
            btnStyles.Add(ButtonRenderStyle.None);
            @*EndHide*@
        }
    }
</DemoPageSectionComponent>
